<template>
  <div class="box">
    <header class="header">
        <ul>
          <li>
            <van-icon name="arrow-left" color="#666" size="20px" @click="leftGo"/>
          </li>
          <li>
            <div class="search" >
              <van-search
                v-model="keyword"
                shape="round"
                background="#fff"
                placeholder="请输入搜索关键词"
                @search="toSearchRessult"
              />
            </div>
          </li>
        </ul>
    </header>
    <ul class="content">
      <li class="hot">
        <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item v-for="(item, index) of categorylist" :key="index" :title="item">
        </van-sidebar-item>
      </van-sidebar>
      </li>
      <li class="hotSpan">
        <van-row>
          <van-col span="24">热门分类</van-col>
        </van-row>
        <div >
          <ul>
            <li v-for="item of categorybrandlist" :key="item.brand" @click="toSearchRessult(item.brand)">
              <van-image
                width="50"
                height="50"
                src="https://img13.360buyimg.com/n1/s450x450_jfs/t1/92595/13/5590/90517/5dee4a12Ef3d605c9/f5e1a764e2632674.jpg"
              />
              <p class="van-ellipsis">{{item.brand}}</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search, Sidebar, SidebarItem, Collapse, CollapseItem, Icon, Col, Row, Tag, Image as VanImage } from 'vant'
import { getCategorylist, getCategorybrandlist } from '@/api/kind'

Vue.use(NavBar)
Vue.use(Search)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(Icon)
Vue.use(Col)
Vue.use(Row)
Vue.use(Tag)
Vue.use(VanImage)
export default {
  data () {
    return {
      value: '',
      categorylist: [],
      activeKey: 0,
      activeNames: ['1'],
      keyword: '',
      categorybrandlist: [],
      category: ''
    }
  },
  mounted () {
    this.getCategorylist()
  },
  methods: {
    async getCategorylist () {
      var res = await getCategorylist()
      if (res.data.code === '200') {
        this.categorylist = res.data.data
        this.onChange(0)
      }
    },
    leftGo () {
      this.$router.back()
    },
    onSearch () {
      this.getsearch()
    },
    async onChange (index) {
      this.category = this.categorylist[index]
      var res = await getCategorybrandlist({ category: this.categorylist[index] })
      if (res.data.code) {
        this.categorybrandlist = res.data.data
      }
    },
    toSearchRessult (brand) {
      if (brand) {
        this.$router.push({ path: '/searchResult', query: { brand: brand, category: this.category } })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.box
  .header
    color #666
    background-color #fff
    padding-bottom: 5px
    border-bottom 1px solid #EAEAEA
    ul
      display flex
      height 100%
      li
        height 100%
        width 50px
        display flex
        justify-content center
        align-items center
        color #fff
        &:nth-child(2)
          flex 1
        .search
          width 100%
          height 65%
          border-radius 30px
          background-color #F7F7F7
          margin-bottom: 15px
          .van-search
            padding 5px
.content
    overflow hidden
    display flex
    .hot
      width 80px
    .hotSpan
      position: fixed
      left: 90px
      width calc(100% - 80px)
      .van-row
        height 60px
        line-height: 60px
        font-size: 16px
        font-weight: bold
        color: #333
      div
        ul
          li
            float: left
            margin-left: 5px
            width: 90px
            text-align: center
            margin-top: 10px
            p
              width: 80%
              text-align: center
              padding-left: 5px
              margin-right: 0px
</style>
